<!-- 课程详情 -->
<template>
  <div class="courseDetails basePage">
    <div class="basePageBox">
      <CustomBreadcrumb class="CustomBreadcrumb" :breadcrumbList="breadcrumbList"></CustomBreadcrumb>
      <div id="videoPlayer" class="videoPlay"></div>
    </div>
  </div>
</template>

<script>
import CustomBreadcrumb from '@/components/CustomBreadcrumb.vue';

export default {
  name: 'VideoDetails',
  components: { CustomBreadcrumb },
  data() {
    return {
      breadcrumbList: [
        {
          name: '集体备课',
          url: '/teach',
        },
        {
          name: '详情',
          url: '',
        },
      ],
      videoPlayer: null,
      siteId: window.baseConfig.userId,
    };
  },
  computed: {
    queryParams() {
      return this.$route.query;
    },
  },
  mounted() {
    this.breadcrumbList[1].name = this.queryParams.name;
    const script = document.createElement('script');
    script.src = `https://p.bokecc.com/player?siteid=${this.siteId}&newversion=true`;
    script.async = false; // 异步加载
    document.head.appendChild(script);
    script.onload = () => {
      console.log('脚本加载成功');
      setTimeout(() => {
        this.createPlayer();
      }, 500)
    };
    script.onerror = () => {
      console.log('脚本加载失败');
      setTimeout(() => {
        this.createPlayer();
      }, 500)
    };
  },
  methods: {
    // 创建视频
    createPlayer() {
      this.videoPlayer = document.getElementById("videoPlayer");
      this.player = window.createCCH5Player({
        vid: this.queryParams.videoId,
        siteid: this.siteId,
        // autoStart: true,
        width: "100%",
        height: "100%",
        parentNode: this.videoPlayer,
      });
    },

  },
};
</script>

<style lang="scss" scoped>
.courseDetails {
  padding-bottom: 32px;
  .CustomBreadcrumb {
    margin: 30px 0;
  }
  .videoPlay {
    width: 100%;
    height: 800px;
    display: block;
    object-fit: cover;
    background: #000;
  }
}
</style>
